<template>
    <main-wrap style="background-color: #fff;">
        <div class="tagBox">
            <van-checkbox-group v-model="tags" shape="square" @change="change">
                <div class="tagsItemBox" v-for="dt in list" :key="dt.group_id">
                    <h4>{{dt.group_name}}</h4>
                    <div class="tags">
                        <van-checkbox v-for="dt2 in dt.tag" :name="dt2.id" :key="dt2.id">
                            <template #icon="props"></template> <!--去掉选择框-->
                            <span :class="{'selected':tags.indexOf(dt2.id)>-1}">{{dt2.name}}</span>
                        </van-checkbox> 
                    </div>
                </div>
            </van-checkbox-group>
        </div>
        <template v-slot:footer>
            <a class="cjbtnbox">
                <van-button type="primary" round color="#e3af2f" block>确定</van-button>
            </a>
        </template>
    </main-wrap>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import {getTagList} from '@/api/qy-wechat-api'
import mainWrap from '@/components/mainWrap.vue'

//const emit = defineEmits(['update:modelValue'])

const list = ref([])
const tags = ref([])

onMounted(async ()=>{
    // 腾讯接口直接获取的数据
    const res = await getTagList()
    list.value = res.data.tag_group
})


const change = ()=>{
   // emit('update:modelValue',tags.value)
}
</script>

<style lang="scss" scoped>
.tagBox{
    padding: 30px 0;
}
.tagsItemBox{
    padding: 0 20px 0 5px;
    margin: 0 0 25px 0;
    h4{
        font-size: 28px;
        font-weight: bold;
        padding: 0 0 0 15px;
        margin: 0 0 20px 0;
    }
    .tags{
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #f3f1f1;
        padding: 0 0 10px 0;
        span{
            display: inline-block;
            padding: 0 20px;
            border-radius: 4px;
            background-color: #f3f1f1;
            height: 60px;
            line-height: 60px;
            margin: 0 0 15px 15px;
            &.selected{
                background-color: #e3af2f;
                color: #fff;
            }
        }
    }
}
.cjbtnbox{
    display: block;
    padding: 10px 20px;
    background-color: #fff;
    box-shadow: 0 0 5px #eee;
}
</style>